<template>
	<view class="uni-searchbar">
		<view :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }" class="uni-searchbar__box" @click="searchClick">
			<!-- #ifdef MP-ALIPAY -->
			<view class="uni-searchbar__box-icon-search"><uni-icons color="#999999" size="18" type="search" /></view>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<uni-icons color="#999999" class="uni-searchbar__box-icon-search" size="18" type="search" />
			<!-- #endif -->
			<input
				v-if="show"
				:focus="showSync"
				:placeholder="placeholder"
				:maxlength="maxlength"
				@confirm="confirm"
				class="uni-searchbar__box-search-input"
				confirm-type="search"
				type="text"
				v-model="searchVal"
				ref="getInputFocus"
			/>
			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
			<view v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== ''))" class="uni-searchbar__box-icon-clear" @click="clear">
				<uni-icons color="#999999" class="" size="24" type="clear" />
			</view>
		</view>
		<text @click="confirm" class="uni-searchbar__cancel" v-if="searchButton === 'always' || (show && searchButton === 'auto')">{{ searchText }}</text>
		<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">{{ cancelText }}</text>
	</view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue';

let timeOut;
export default {
	name: 'UniSearchBar',
	components: {
		uniIcons
	},
	props: {
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		radius: {
			type: [Number, String],
			default: 20
		},
		clearButton: {
			type: String,
			default: 'auto'
		},
		cancelButton: {
			type: String,
			default: 'auto'
		},
		
		cancelText: {
			type: String,
			default: '重置'
		},
		searchButton: {
			type: String,
			default: 'always'
		},
		searchText: {
			type: String,
			default: '搜索'
		},
		bgColor: {
			type: String,
			default: '#F2F5FA'
		},
		maxlength: {
			type: [Number, String],
			default: 100
		},
		searchInput: {
			type: [Boolean, String],
			default: false
		}
	},
	data() {
		return {
			show: false,
			showSync: false,
			searchVal: ''
		};
	},
	onShow() {
		console.log('aaa',this.searchInput);
	},
	watch: {
		searchVal() {
			this.$emit('input', {
				value: this.searchVal
			});
		},
		searchInput() {
			console.log(this.searchInput);
			console.log(this.showSync);
			// this.$refs.getInputFocus.focus=false;
			this.showSync=false;
			console.log(this.showSync);
			if (this.searchInput) {
				console.log(this.$refs);
				this.$nextTick(() => {
					this.showSync = true;
				});
				setTimeout(() => {
					this.showSync = true;
					console.log(this.$refs);
					// 100毫秒延迟解决第二次打开支付框，输入框不自动获取焦点的bug
					// this.$refs.getInputFocus.focus=true; // 等价  document.getElementById("inputValId").focus();
				}, 500);
			}
		}
	},

	methods: {
		searchClick() {
			if (this.show) {
				return;
			}
			this.searchVal = '';
			this.show = true;
			this.$nextTick(() => {
				this.showSync = true;
			});
		},
		clear() {
			this.searchVal = '';
		},
		cancel() {
			this.$emit('cancel', {
				value: this.searchVal
			});
			this.searchVal = '';
			this.show = false;
			this.showSync = false;
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		confirm() {
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
			this.$emit('confirm', {
				value: this.searchVal
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$uni-searchbar-height: 36px;

.uni-searchbar {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	position: relative;
	padding: $uni-spacing-col-base;
	background-color: #FFF;
}

.uni-searchbar__box {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	overflow: hidden;
	position: relative;
	flex: 1;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	height: $uni-searchbar-height;
	padding: 5px 8px 5px 0px;
	border-width: 0.5px;
	border-style: solid;
	border-color: #F2F5FA;
}

.uni-searchbar__box-icon-search {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	width: 32px;
	justify-content: center;
	align-items: center;
	color: $uni-text-color-placeholder;
}

.uni-searchbar__box-search-input {
	flex: 1;
	font-size: $uni-font-size-base;
	color: $uni-text-color;
}

.uni-searchbar__box-icon-clear {
	align-items: center;
	line-height: 24px;
	padding-left: 5px;
}

.uni-searchbar__text-placeholder {
	font-size: $uni-font-size-base;
	color: $uni-text-color-placeholder;
	margin-left: 5px;
}

.uni-searchbar__cancel {
	padding-left: 10px;
	line-height: $uni-searchbar-height;
	font-size: 14px;
	color: $uni-text-color;
}
</style>
